<template>
  <van-sticky>
    <div class="home-search-bar">
      <search-bar class="home-search" readonly @click="$router.push('/search')"/>
      <div class="home-search-icon" @click.stop="handleRouteToCart">
        <van-icon name="shopping-cart-o" size="26px"/>
      </div>
    </div>
  </van-sticky>
</template>

<script>
import { Icon, Search, Sticky, Toast } from "vant"
import SearchBar from "@/components/SearchBar"

export default {
  name: "HomeSearchBar",
  components: {
    SearchBar,
    [Sticky.name]: Sticky,
    [Icon.name]: Icon,
    [Search.name]: Search,
  },
  methods: {
    handleEmpty() {
      Toast("我只是在这站个岗~")
    },
    handleRouteToCart() {
      this.$router.push("/cart")
    },
  },
}
</script>

<style lang="scss" scoped>
.home-search-bar {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 0 9px;

  .home-search {
    flex: 1;

    ::v-deep .search-input {
      padding: 8px 0;
    }
  }

  .home-search-icon {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-left: 9px;

    .home-search-icon-name {
      font-size: 10px;
    }
  }
}
</style>
